<template>
  <div ref="container">
    <breadcrumb :breadList="breadList" :name="name">
      <div class="handle-box" slot="handleContent">
        <div class="handle-btn">
          <a-button class="common-btn" @click="go_toOperation('create', '')">添加项目</a-button>
        </div>
        <div class="handle-btn">
          <a-button class="common-btn" @click="exportList">导出列表</a-button>
        </div>
      </div>
    </breadcrumb>
    <a-card>
      <a-form @submit="handleSubmit" :form="form">
        <a-row :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <div>
              <a-form-item class="spec-item" label="行政区域" :labelCol="{lg: {span: 2}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <div style="display:flex;">
                  <a-form-item>
                    <a-select v-decorator="['queryParam.provice', {initialValue: '山西省', rules: [{required: false, message: ''}]}]" style="width: 145px;">
                      <a-select-option value="山西省">山西省</a-select-option>
                      <a-select-option value="山东省">山东省</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select v-decorator="['queryParam.municipal', {initialValue: '太原市', rules: [{required: false, message: ''}]}]" style="width: 145px;">
                      <a-select-option value="市">市</a-select-option>
                      <a-select-option value="太原市">太原市</a-select-option>
                      <a-select-option value="未知市">未知市</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select v-decorator="['queryParam.county', {initialValue: '小店区', rules: [{required: false, message: ''}]}]" style="width: 145px;">
                      <a-select-option value="县（区）">县（区）</a-select-option>
                      <a-select-option value="小店区">小店区</a-select-option>
                      <a-select-option value="未知区">未知区</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select v-decorator="['queryParam.village', {initialValue: '小店乡', rules: [{required: false, message: ''}]}]" style="width: 145px;">
                      <a-select-option value="乡（镇/街道）">乡（镇/街道）</a-select-option>
                      <a-select-option value="小店乡">小店乡</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select v-decorator="['queryParam.burg', {initialValue: '小店村', rules: [{required: false, message: ''}]}]" style="width: 145px;">
                      <a-select-option value="村（社区）">村（社区）</a-select-option>
                      <a-select-option value="村">村</a-select-option>
                    </a-select>
                  </a-form-item>
                </div>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
        <a-row clss="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="改造路径" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 14}, sm: {span: 17} }">
              <a-select :disabled="disabled" v-decorator="['queryParam.proType', {initialValue: '煤改气',rules: [{required: false, message: ''}]}]" style="width: 220px;">
                <a-select-option value="煤改气">煤改气</a-select-option>
                <a-select-option value="煤改电">煤改电</a-select-option>
                <a-select-option value="集中供热">集中供热</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="设备类型" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-select :disabled="disabled" v-decorator="['queryParam.type', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 220px;">
                <a-select-option value="1">空气源热泵</a-select-option>
                <a-select-option value="2">电磁采暖炉</a-select-option>
                <a-select-option value="3">蓄热式电暖器</a-select-option>
                <a-select-option value="4">空气能热风机</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="12" :sm="24">
            <a-form-item label="" :colon="false">
              <a-button class="common-btn" @click="toSearch('2')">查询</a-button>
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="12" :sm="24">
            <a-form-item label="" :colon="false">
              <a-button class="common-btn" @click="$refs.advSearchModel.add('')">高级搜索</a-button>
            </a-form-item>
          </a-col>
        </a-row>
        <adv-search-model ref="advSearchModel" @closeModel="closeModel"></adv-search-model>
      </a-form>
    </a-card>
    <a-card>
      <a-table
        :columns="columns"
        :dataSource="loadData"
        bordered
        :loading="loading"
        :pagination="false"
        :scroll="{ x: 1800 }">
        <template slot="name" slot-scope="text, record">
          <p style="display:inline" @click="go_toOperation('detail',record)">
            <a href="javascript:;">{{ record.name }}</a>
          </p>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import Breadcrumb from '@/components/tools/Breadcrumb'
import AdvSearchModel from './advSearchModel'
// import { getSupplierList } from '@/api/mockdata'
export default {
  name: 'LedgerList',
  components: {
    Breadcrumb,
    AdvSearchModel
  },
  data () {
    return {
      name: '',
      breadList: [],
      loading: false,
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '序号',
          width: '4%',
          dataIndex: 'code'
        }, {
          title: '户主姓名（企事业单位名称）',
          width: '8%',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        }, {
          title: '联系电话',
          width: '4%',
          dataIndex: 'tel'
        }, {
          title: '地址',
          width: '6%',
          dataIndex: 'address'
        }, {
          title: '用户类型',
          width: '6%',
          dataIndex: 'userType'
        },
        {
          title: '建筑面积',
          width: '6%',
          dataIndex: 'totalArea'
        },
        {
          title: '改造路径',
          width: '6%',
          dataIndex: 'path'
        },
        {
          title: '设备类型',
          width: '6%',
          dataIndex: 'equipmentType'
        },
        {
          title: '设备数量',
          width: '5%',
          dataIndex: 'equipmentCount'
        },
        {
          title: '品牌厂家',
          width: '6%',
          dataIndex: 'brand'
        },
        {
          title: '安装单位',
          width: '6%',
          dataIndex: 'installCompany'
        },
        {
          title: '计划改造时间',
          width: '8%',
          dataIndex: 'planTime'
        },
        {
          title: '改造完成时间',
          width: '8%',
          dataIndex: 'completeTime'
        },
        {
          title: '所处阶段',
          width: '6%',
          dataIndex: 'status'
        },
        {
          title: '备注',
          dataIndex: 'remark'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: []
    }
  },
  created () {
    this.loading = true
    this.getBreadCrumb()
    setTimeout(() => {
      this.getData('1')
    }, 1000)
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
    },
    getData (code) {
      const data = [
        {
          code: '1',
          name: '郭靖',
          tel: '18899999999',
          address: '小店区三村',
          userType: '居民',
          totalArea: '9999',
          path: '煤改电',
          equipmentType: '空气源热泵',
          equipmentCount: '5',
          brand: '海尔',
          installCompany: '三把起子',
          planTime: '2015-12-30',
          completeTime: '2019-01-01',
          status: '已完成',
          remark: '人，要么庸俗，要么孤独'
        }, {
          code: '2',
          name: '居委会',
          tel: '18899999999',
          address: '小店区三村',
          userType: '居民',
          totalArea: '9999',
          path: '煤改电',
          equipmentType: '空气源热泵',
          equipmentCount: '5',
          brand: '海尔',
          installCompany: '三把起子',
          planTime: '2015-12-30',
          completeTime: '2019-01-01',
          status: '已完成',
          remark: '越美丽的东西我越不可碰'
        }, {
          code: '3',
          name: '居委会',
          tel: '18899999999',
          address: '小店区三村',
          userType: '居民',
          totalArea: '9999',
          path: '煤改电',
          equipmentType: '空气源热泵',
          equipmentCount: '5',
          brand: '海尔',
          installCompany: '三把起子',
          planTime: '2015-12-30',
          completeTime: '2019-01-01',
          status: '已完成',
          remark: '是否你也会在人潮拥挤的街头,寻寻觅觅,期盼相遇在夕阳斜斜的乌衣巷口'
        }, {
          code: '4',
          name: '郭靖',
          tel: '18899999999',
          address: '小店区三村',
          userType: '居民',
          totalArea: '9999',
          path: '煤改电',
          equipmentType: '空气源热泵',
          equipmentCount: '5',
          brand: '海尔',
          installCompany: '三把起子',
          planTime: '2015-12-30',
          completeTime: '2019-01-01',
          status: '已完成',
          remark: '过去了就是昨天,新的一页翻开还是晴朗的天'
        }
      ]
      if (code === '1') {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
          this.$success({
            title: '查询成功'
          })
        }, 1000)
      }
    },
    toSearch (status) {
      this.loading = true
      this.getData(status)
    },
    handleSubmit () {
      console.log('ttt')
    },
    exportList () {
      this.$success({
        title: '导出成功'
      })
    },
    closeModel () {
      this.getData('2')
    },
    go_toOperation (type, record) {
      this.$router.push({
        name: 'equipmentDetails',
        query: {
          proDetails: JSON.stringify(record)
        }
      })
    }
  }
}

</script>

<style lang="less" scoped>
// .handle-box {
//   display: flex;
//   margin-bottom: 10px;
//   margin-left: 800px;
// }
// .handle-btn {
//   margin-left:5px;
// }
</style>
